<template>
  <div class="page-grey">
    <div class="top">
      <span @click="$router.back()">
        <svg-icon icon-class="back" class="icon" />
      </span>
      <span class="center">设置</span>
    </div>
    <div class="box">
      <van-cell title="头像" is-link @click="openAvatar">
        <img slot="default" class="avatar" :src="avatar" />
      </van-cell>
      <van-cell
        title="昵称修改"
        :value="nickname"
        @click="openNickname"
        is-link
      />
      <van-cell title="账号" :value="account" />
      <van-cell title="手机号" is-link />
    </div>
    <div class="box">
      <van-cell title="账户密码" is-link />
      <van-cell title="真实姓名" @click="openRealname" is-link>
        <template slot="default">
          <span v-if="realname">{{ realname }}</span>
          <span v-else class="notset">未设置</span>
        </template>
      </van-cell>
      <van-cell title="我要分享" is-link to="share" />
    </div>
    <div class="box">
      <van-cell title="关于我们" is-link to="about" />
    </div>
    <div class="big-btn" @click="logout">退出账号</div>

    <!-- 头像编辑 -->
    <v-avatar v-show="showAvatar" @close="closeAvatar" />
    <v-nickname v-show="showNickname" :data="nickname" @close="closeNickname" />
    <v-realname v-show="showRealname" :data="realname" @close="closeRealname" />
  </div>
</template>

<script>
import vAvatar from "./components/Avatar";
import vNickname from "./components/Nickname";
import vRealname from "./components/Realname";
export default {
  data() {
    return {
      avatar: require("../../assets/images/avatar.png"),
      defaultAvatar: require("../../assets/images/avatar.png"),
      nickname: "小可爱",
      account: "091325",
      realname: null,
      showAvatar: false,
      showNickname: false,
      showRealname: false
    };
  },
  components: {
    vAvatar,
    vNickname,
    vRealname
  },
  methods: {
    openAvatar() {
      this.showAvatar = true;
    },
    closeAvatar(data) {
      this.showAvatar = false;
      this.avatar = data || this.defaultAvatar;
    },
    openNickname() {
      this.showNickname = true;
    },
    closeNickname(data) {
      this.showNickname = false;
      this.nickname = data || null;
    },
    openRealname() {
      this.showRealname = true;
    },
    closeRealname(data) {
      this.showRealname = false;
      this.realname = data || null;
    },
    // 退出
    logout() {
      this.$dialog
        .confirm({
          title: "标题",
          message: "确定退出登录？"
        })
        .then(() => {
          this.$router.push({ name: "login" });
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  margin-bottom: 15px;
  background-color: #fff;
  .avatar {
    width: 40px;
    height: 40px;
    margin-left: 70%;
  }
  .notset {
    position: relative;
    display: inline-block;
    color: #eb7875;
    padding-right: 10px;
    &::after {
      content: ".";
      position: absolute;
      right: 0;
      top: -20px;
      color: #eb7875;
      font-size: 35px;
    }
  }
}
</style>
